<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-directive 全局api实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-directive 全局api实例</h1>
<hr>
<div id="app">
    <div v-fesine="color">{{num}}</div>
    <p><button @click="add">增加</button></p>
    <p><button onclick="unbind()">解绑</button></p>
</div>
<script type="text/javascript">
    function unbind () {
      app.$destroy();
    }
    // 使用v-directive自定义标签
    Vue.directive('fesine',{
      bind: function () {//被绑定
        console.log('1 - bind');
      },
      inserted: function () {//绑定到节点
        console.log('2 - inserted');
      },
      update: function (el, binding) {//组件更新
        console.log('3 - update');
        el.style.color = binding.value
      },
      componentUpdated: function () {//组件更新完成
        console.log('4 - componentUpdated');
      },
      unbind: function () {//解绑
        console.log('5 - unbind');
      }
    })
    // Vue.directive('fesine',function (el, binding) {
    //     console.log(el);
    //     console.log(binding);
    //     el.style.color=binding.value
    // })
    var app = new Vue({
      el:'#app',
      data:{
        num:1,
        color:'red'
      },
      methods:{
        add(){
          this.num++;
        }
      }
    })
</script>
</body>
</html>